<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery实现表格样式</title>
    <style type="text/css">
        #mytable td{
            text-align: center;
        }
        table{
            display:block;
            margin: 0 auto;
            padding: 0;
            width: 500px;
            height: 200px;
            /* border: 1px black solid; */
            border-collapse: collapse;
        }
        tr,td,th{
            border: 1px black solid;
            height: 25px;

        }
    </style>
    <script src="jquery-3.5.1/jquery-3.5.1/jquery-3.5.1.js" langrage="javascript"></script>
    <script>
        // 文档就绪函数
        $(document).ready(function(){
            //隔行变色
            $("tr:even").css("background-color","#AEEEEE");//偶数行
            $("tr:odd").css("background-color","#43CD80");//奇数行背景色
            //滑动变色
            // $("tr").hover(function(){
            //     /*定义鼠标悬停在表格行上事件。*/
            //     $(this).css("background-color","#FF6A6A");
            // });
            // $("tr:even").mouseout(function(){
            //     $(this).css("background-color","#AEEEEE")
            // });
            // $("tr:odd").mouseout(function(){
            //     $(this).css("background-color","#43CD80")
            // });

            $("td").hover(function(){
                /*定义鼠标悬停在单元格上事件。*/
                $(this).css("background-color","#FF6A6A");
            });
            $("tr:even td").mouseout(function(){
                $(this).css("background-color","#AEEEEE")
            });
            $("tr:odd td").mouseout(function(){
                $(this).css("background-color","#43CD80")
            });

            $("th").hover(function(){
                /*定义鼠标悬停在标题单元格上事件。*/
                $(this).css("background-color","#4876FF");
            });
            $("th").mouseout(function(){
                $(this).css("background-color","#AEEEEE")
            });
        });
    </script>
</head>
<body>
    <table id="mytable">
        <tr>
            <th>序号</th>
            <th>节目名</th>
            <th>表演者</th>
        </tr>
        <tr>
            <td>1</td><td>歌舞《美丽中国年》</td><td>TFBOYS、刘涛、蒋欣、王子文</td>
        </tr>
        <tr>
            <td>2</td><td>儿童歌舞《金鸡报晓》</td><td>空军蓝天幼儿艺术团 </td>
        </tr>
        <tr>
            <td>3</td><td>小品《大城小爱》</td><td>刘亮、白鸽、郭金杰</td>
        </tr>
    </table>
</body>
</html>